@import "../var";
@import '../animation';
@import '../shape';

.#{$ui-prefix}button {
  display: inline-flex; vertical-align: middle;
  justify-content: center; align-items: center;

  @include differentSizeInput(){
    &:not([disabled]),&:not([readonly]){cursor: pointer;}
    background:#fff;
    text-align: center;
    padding-left:1em;
    padding-right:1em;

    width: initial;
    white-space: nowrap;

    &:focus{
      border-color:$input-borderColor;
    }
    &:hover{
      color:$button-color-hover;
      border-color:$input-borderColor-hover;
      svg {fill: $button-color-hover;}
    }
  };

  margin:0;
  text-decoration: none;

  //iconPosition:left
  > .#{$ui-prefix}button-icon { order: 1; margin-right: 4px; }
  > .#{$ui-prefix}button-content { order: 2; }

  //iconPosition:right
  &.iconRight {
    > .#{$ui-prefix}button-icon { order: 2; margin-right: 0; margin-left: 4px;}
    > .#{$ui-prefix}button-content { order: 1; }
  }

  &.iconOnly{
    > .#{$ui-prefix}button-icon {
      margin:0;
    }

    box-sizing:border-box;
    font-size:14px;
    height:32px;

    &.large{
      font-size:16px;
      height:36px;
    }

    &.small{
      height:28px;
    }
  }

  //&:active { background-color: #dedede; }

  .#{$ui-prefix}button-iconLoading {
    @include spin();
  }
}
